<template>
  <div class="son-con">
    <p>{{ userName }}-{{ age }}-{{ sex }}</p>
    <ul>
      <li v-for="item in hobby" :key="item.id">{{ item }}</li>
    </ul>
    <table>
      <thead>
        <tr>
          <td>序号</td>
          <td>姓名</td>
          <td>年龄</td>
          <td>性别</td>
          <td>爱好</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(friend, index) in friends" :key="friend.id">
          <td>{{ index + 1 }}</td>
          <td>{{ friend.userName }}</td>
          <td>{{ friend.age }}</td>
          <td>{{ friend.sex }}</td>
          <td>
            <ul>
              <li v-for="ho in friend.hobby" :key="ho">{{ ho }}</li>
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "SonCon",
  // 2.子组件中使用props接收
  // props: ["userName", "age", "sex", "hobby", "friends"],
  // props:{
  //   // 添加类型验证
  //   userName: String,
  //   age:Number,
  //   sex:String,
  //   hobby:Array,
  //   friends:Array
  // }

  // 类型校验，非空校验，默认值，自定义校验
  props: {
    userName: {
      type: String,
      default: "默认姓名",
      // required: true,
      validator(val) {
        return val === "防抖";
      },
    },
    age: {},
    sex: {},
    hobby: {},
    friends: {},
  },
};
</script>

<style scoped>
.son-con {
  width: 300px;
  height: 500px;
  background-color: skyblue;
}
</style>